// 设置帮助和提示组件
// 为用户提供设置相关的帮助信息

import React, { useState } from 'react';
import { HelpCircle, X, ChevronDown, ChevronRight, Lightbulb, AlertCircle } from 'lucide-react';

interface SettingsHelpProps {
  isOpen: boolean;
  onClose: () => void;
}

interface HelpSection {
  id: string;
  title: string;
  content: React.ReactNode;
  type: 'info' | 'tip' | 'warning';
}

const helpSections: HelpSection[] = [
  {
    id: 'getting-started',
    title: '开始使用',
    type: 'info',
    content: (
      <div className="space-y-3">
        <p>欢迎使用 CodeGraph 编辑器设置！这里是一些快速入门提示：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li>使用左侧导航栏浏览不同的设置分类</li>
          <li>使用顶部搜索框快速找到特定设置</li>
          <li>修改的设置会自动保存</li>
          <li>可以随时重置单个设置或整个分类</li>
        </ul>
      </div>
    )
  },
  {
    id: 'editor-settings',
    title: '编辑器设置',
    type: 'info',
    content: (
      <div className="space-y-3">
        <p>编辑器设置控制代码编辑的外观和行为：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li><strong>字体大小</strong>：推荐范围 12-18px</li>
          <li><strong>制表符大小</strong>：通常使用 2 或 4 个空格</li>
          <li><strong>自动保存</strong>：建议启用以防止数据丢失</li>
          <li><strong>代码折叠</strong>：帮助管理大型文件</li>
        </ul>
      </div>
    )
  },
  {
    id: 'appearance-settings',
    title: '外观设置',
    type: 'info',
    content: (
      <div className="space-y-3">
        <p>外观设置让您自定义编辑器的视觉效果：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li><strong>主题</strong>：选择浅色、深色或跟随系统</li>
          <li><strong>强调色</strong>：自定义界面的主色调</li>
          <li><strong>布局</strong>：调整侧边栏和面板位置</li>
          <li><strong>图标</strong>：选择文件图标主题</li>
        </ul>
      </div>
    )
  },
  {
    id: 'keyboard-shortcuts',
    title: '快捷键设置',
    type: 'tip',
    content: (
      <div className="space-y-3">
        <p>自定义快捷键可以大大提高工作效率：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li>点击快捷键旁的编辑按钮进行修改</li>
          <li>使用"录制"功能直接按键设置</li>
          <li>系统会自动检测快捷键冲突</li>
          <li>可以重置为默认快捷键</li>
        </ul>
        <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
          <p className="text-sm text-blue-800 dark:text-blue-200">
            💡 提示：常用快捷键包括 Ctrl+S (保存)、Ctrl+Z (撤销)、Ctrl+F (查找)
          </p>
        </div>
      </div>
    )
  },
  {
    id: 'import-export',
    title: '导入导出设置',
    type: 'tip',
    content: (
      <div className="space-y-3">
        <p>您可以备份和共享您的设置配置：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li><strong>导出</strong>：将当前设置保存为 JSON 文件</li>
          <li><strong>导入</strong>：从文件恢复设置配置</li>
          <li><strong>备份</strong>：建议在重大更改前备份设置</li>
          <li><strong>共享</strong>：可以与团队成员共享配置文件</li>
        </ul>
      </div>
    )
  },
  {
    id: 'performance-tips',
    title: '性能优化建议',
    type: 'tip',
    content: (
      <div className="space-y-3">
        <p>以下设置可以帮助提升编辑器性能：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li>适当调整最大内存使用量</li>
          <li>启用 GPU 加速（如果支持）</li>
          <li>关闭不必要的编辑器功能</li>
          <li>限制同时打开的文件数量</li>
        </ul>
      </div>
    )
  },
  {
    id: 'troubleshooting',
    title: '常见问题',
    type: 'warning',
    content: (
      <div className="space-y-3">
        <p>遇到问题时的解决方案：</p>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li><strong>设置不生效</strong>：尝试重启应用程序</li>
          <li><strong>快捷键冲突</strong>：检查冲突检测器并修改冲突项</li>
          <li><strong>性能问题</strong>：降低内存限制或关闭动画</li>
          <li><strong>界面异常</strong>：重置外观设置到默认值</li>
        </ul>
        <div className="mt-3 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
          <p className="text-sm text-orange-800 dark:text-orange-200">
            ⚠️ 如果问题持续存在，可以尝试重置所有设置到默认值
          </p>
        </div>
      </div>
    )
  }
];

export const SettingsHelp: React.FC<SettingsHelpProps> = ({
  isOpen,
  onClose
}) => {
  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(['getting-started']));

  const toggleSection = (sectionId: string) => {
    setExpandedSections(prev => {
      const newSet = new Set(prev);
      if (newSet.has(sectionId)) {
        newSet.delete(sectionId);
      } else {
        newSet.add(sectionId);
      }
      return newSet;
    });
  };

  const getTypeIcon = (type: HelpSection['type']) => {
    switch (type) {
      case 'tip':
        return <Lightbulb className="w-4 h-4 text-blue-600" />;
      case 'warning':
        return <AlertCircle className="w-4 h-4 text-orange-600" />;
      default:
        return <HelpCircle className="w-4 h-4 text-gray-600" />;
    }
  };

  const getTypeColor = (type: HelpSection['type']) => {
    switch (type) {
      case 'tip':
        return 'border-blue-200 dark:border-blue-800';
      case 'warning':
        return 'border-orange-200 dark:border-orange-800';
      default:
        return 'border-gray-200 dark:border-gray-700';
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl w-full max-w-4xl h-full max-h-[90vh] flex flex-col">
        {/* 标题栏 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center space-x-2">
            <HelpCircle className="w-6 h-6 text-blue-600" />
            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
              设置帮助
            </h2>
          </div>
          <button
            onClick={onClose}
            className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* 内容区域 */}
        <div className="flex-1 overflow-y-auto p-6">
          <div className="space-y-4">
            {helpSections.map((section) => {
              const isExpanded = expandedSections.has(section.id);
              
              return (
                <div
                  key={section.id}
                  className={`border rounded-lg ${getTypeColor(section.type)}`}
                >
                  <button
                    onClick={() => toggleSection(section.id)}
                    className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800 rounded-t-lg"
                  >
                    <div className="flex items-center space-x-3">
                      {getTypeIcon(section.type)}
                      <span className="font-medium text-gray-900 dark:text-white">
                        {section.title}
                      </span>
                    </div>
                    {isExpanded ? (
                      <ChevronDown className="w-4 h-4 text-gray-500" />
                    ) : (
                      <ChevronRight className="w-4 h-4 text-gray-500" />
                    )}
                  </button>
                  
                  {isExpanded && (
                    <div className="px-4 pb-4 text-gray-600 dark:text-gray-400">
                      {section.content}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* 底部操作栏 */}
        <div className="flex justify-end p-6 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};
